<template>
  <el-button type="primary" color="#017dff" @click="drawer = true">
    添加轮播图<el-icon class="el-icon--right">
      <Plus />
    </el-icon>
  </el-button>
  <el-button type="danger" @click="clearAll">
    清空轮播图<el-icon class="el-icon--right">
      <Minus />
    </el-icon>
  </el-button>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" prop="date" label="序号" width="100" />
    <el-table-column prop="img" label="图片" width="350">
      <template #default="scope">
        <img :src="scope.row.img">
      </template>
    </el-table-column>
    <el-table-column prop="address" label="图片链接">
      <template #default="scope">
        <el-link :href="scope.row.link" type="primary">图片链接</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="提示">
      <template #default="scope">
        <p>{{ scope.row.alt }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="是否展示" width="150">
      <template #default="scope">
        <el-switch @change="(val: boolean) => changeFlag(scope.row.bannerid, val)" v-model="scope.row.flag" />
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="150">
      <template #default="sss">
        <el-button size="small" type="danger" @click="dleSwipers(sss.row.bannerid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer v-model="drawer" direction="rtl" title="添加轮播图" :before-close="handleClose">
    <AddSwiper @success="okFn"></AddSwiper>
  </el-drawer>
</template>

<script setup lang="ts">
import { ElMessageBox, ElNotification } from 'element-plus'
import { ref, reactive, markRaw } from 'vue'
import type { Ref } from 'vue'
import service from '@/utils/service.ts'
import AddSwiper from '@/views/swipers/AddSwiper.vue'
import type { ISwipers } from '../../mytype'
import { Delete } from '@element-plus/icons-vue'


// export interface ISwipers {
//     "alt"?: string,
//     "link"?: string,
//     "img"?: string,
//     "bannerid"?: string,
//     "flag"?: boolean
// }
const tableData = reactive<ISwipers[]>([])

// 查看轮播图数据
function getSwipers() {
  service({
    url: '/admin/banner/list',
  }).then((res: any) => {
    if (res.data.code === "200") {
      tableData.length = 0
      tableData.push(...res.data.data)
    } else if (res.data.code === '10119') {
      ElNotification({
        message: 'token无效,请重新登录',
        type: 'error',
      })
    }
  })
}

getSwipers()
// 传给子组件的数据
const okFn = () => {
  drawer.value = false
  getSwipers()
}

// 添加轮播图
const drawer: Ref<boolean> = ref<boolean>(false)
// 关闭抽屉
const handleClose = (done: () => void) => {
  ElMessageBox.confirm(
    '确定要退出添加轮播图吗？',
    '警告！',
    {
      confirmButtonText: '是的',
      cancelButtonText: '再想想',
      type: 'warning',
    })
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

// 删除轮播图
const dleSwipers = (bannerid: string) => {
  ElMessageBox.confirm(
    '真的要删除这个轮播图吗？',
    '警告！',
    {
      confirmButtonText: '是的',
      cancelButtonText: '再想想',
      type: 'warning',
      icon: markRaw(Delete),
    }
  )
    .then(() => {
      service({
        url: '/admin/banner/delete',
        params: { bannerid }
      }).then((res: any) => {
        if (res.data.code === '200') {
          ElNotification({
            message: '删除成功',
            type: 'success',
          })
          getSwipers()
        }
      })
    })
    .catch(() => {
      // catch error
    })
}



// 修改仿问状态
const changeFlag = (bannerid: string, val: boolean) => {
  service({
    url: '/admin/banner/updateFlag',
    method: 'post',
    data: {
      bannerid,
      flag: val
    }
  }).then((res: any) => {
    if (res.data.code === '200') {
      ElNotification({
        message: '修改状态成功',
        type: 'success',
      })
      getSwipers()
    }
  })
}


// 清空轮播图
const clearAll = () => {
  ElMessageBox.confirm(
    '真的要清空全部轮播图吗？',
    '警告！',
    {
      confirmButtonText: '是的',
      cancelButtonText: '再想想',
      type: 'warning',
      icon: markRaw(Delete),
    }
  ).then(() => {
    service({
      url: '/admin/banner/removeAll'
    }).then((res: any) => {
      if (res.data.code === '200') {
        ElNotification({
          message: '清空成功',
          type: 'success',
        })
        getSwipers()
      }
    })
  })
    .catch(() => {
      // catch error
    })
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
  border-radius: 15px;
}

img {
  width: 200px;
  height: 100px;
}
</style>